<ion-content no-padding class="fast-maintain">
  <top-tab [data]="items"></top-tab>
  <div *ngIf="currentPageIndex == 0" class="maintain">
    <ion-grid class="input-box">
      <ion-row class="select-box">
        <ion-col col-4>房间号</ion-col>
        <ion-col>
          <ion-select placeholder="请选择房间号(*必选项)" [(ngModel)]="reqData.houseId">
            <ion-option *ngFor="let item of houseList"[value]="item.houseId">{{item.houseNo}}</ion-option>
          </ion-select>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col col-4>报修内容</ion-col>
        <ion-col>
          <input type="text" placeholder="请输入报修内容(*必填项)" [(ngModel)]="reqData.content">
        </ion-col>
      </ion-row>
    </ion-grid>
    <ion-grid class="textarea-warp">
      <textarea placeholder="说一说具体的求助信息，清楚明确的描述容易获得帮助" [(ngModel)]="reqData.detail"></textarea>
    </ion-grid>
    <ion-grid class="file-warp" (click)="chooseImage()">
      <img *ngIf="reqData.image[0]!=''" [src]="reqData.image[0]" alt="">
      <div class="file-inner" *ngIf="reqData.image[0]==''">
        <p no-margin>
          <ion-icon name="add-pic"></ion-icon>
        </p>
        <p>若无法用语言描述清楚，点击此处上传图片</p>
      </div>
    </ion-grid>
    <button class="submit-btn" (click)="submit()" [disabled]="reqData.houseId=='' || reqData.content=='' ">立即申请</button>
  </div>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <div *ngIf="currentPageIndex == 1" class="maintain-detail">
    <div class="maintain-item" *ngFor="let item of maintainDetail">
      <ion-grid class="title">
        <ion-row>
          <ion-col class="color-red">{{item.statusName}}</ion-col>
          <ion-col>{{item.createTime}}</ion-col>
        </ion-row>
      </ion-grid>
      <ion-grid class="provider" *ngIf="item.status!=1">
        <ion-row>
          <ion-col col-3>服务人员</ion-col>
          <ion-col>{{item.providerName}}</ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-3>联系方式</ion-col>
          <ion-col>{{item.providerPhone}}</ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-3>上门时间</ion-col>
          <ion-col>{{item.providerTime}}</ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-3>维修费用</ion-col>
          <ion-col>&yen;{{item.repairFee}}</ion-col>
          <ion-col *ngIf="item.status==4">已支付</ion-col>
        </ion-row>
      </ion-grid>
      <ion-grid class="content">
        <ion-row>
          <ion-col class="con">{{item.content?item.content:'无'}}</ion-col>
        </ion-row>
        <ion-row class="img-box" *ngIf="item.image!=null&&item.image.length>0">
          <img *ngFor="let v of item.image" [src]="v" alt="">
        </ion-row>
      </ion-grid>
      <ion-grid class="btn-box" *ngIf="item.status!=1||item.status!=8">
        <ion-row>
          <ion-col con-7></ion-col>
          <ion-col>
            <button class="pay-btn" *ngIf="item.status==2 && item.needFee" (click)="goCheckstand(item)">支付</button>
            <button class="main-text-gradient" *ngIf="item.status==4" (click)="goToRating(item)">评价</button>
          </ion-col>
        </ion-row>
      </ion-grid>
      <ion-grid class="comment-rating" *ngIf="item.status==8">
        <ion-row class="rating">
          <ion-col col-3>评分</ion-col>
          <ion-col>
            <span *ngFor="let v of [1,2,3,4,5]">
        <ion-icon name="on-star" *ngIf="v<=item.commentScore"></ion-icon>
        <ion-icon name="off-star" *ngIf="v>item.commentScore"></ion-icon>
        </span>
          </ion-col>
        </ion-row>
      </ion-grid>
      <ion-grid class="comment-con" *ngIf="item.status==8">
        <ion-row class="con">{{item.comment}}</ion-row>
      </ion-grid>
    </div>
    <div class="notice" *ngIf="maintainDetail.length<=0">
      ----暂无报修内容----
    </div>
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)" *ngIf="canLoadMore">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
    <div *ngIf="!canLoadMore&&maintainDetail.length>10"
         style="text-align: center;width: 100%;height: 60px;padding: 20px 0;color:#848484">
      ————————别扯啦!————————
    </div>
  </div>

</ion-content>
